<template>
	<div class="sys-pos-container">
		<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
					</el-icon>
					<span> {{ props.title }} </span>
				</div>
			</template>
			<el-form :model="state.ruleForm" label-width="auto" ref="ruleFormRef" class="fl">
        <el-form-item label="所属仓库" :rules="[{ required: true, message: '所属仓库不能为空', trigger: 'change' }]">
          <el-select v-model="state.ruleForm.whNum" filterable clearable class="w100"
            @change="handleChange(state.ruleForm.whNum)">
            <el-option v-for="item in state.belongWarehouses" :key="item" :label="item.eg_wms_warehouse.WHName"
              :value="item.eg_wms_warehouse.WHNum" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属区域" prop="regionNum" :rules="[{ required: true, message: '所属区域不能为空', trigger: 'change' }]">
          <el-select v-model="state.ruleForm.regionNum" filterable clearable class="w100"
            @change="handleChangeRegion()">
            <el-option v-for="item in state.belongAreas" :key="item" :label="item.RegionName" :value="item.RegionNum" />
          </el-select>
        </el-form-item>
        <el-form-item label="原始库位" prop="startPoint" :rules="[{ required: true, message: '库位编号不能为空', trigger: 'change' }]"
          @click="openAddSto">
          <el-input v-model="state.ruleForm.startPoint" type="textarea" clearable />
        </el-form-item>
        <el-form-item label="所属仓库" :rules="[{ required: true, message: '所属仓库不能为空', trigger: 'change' }]">
          <el-select v-model="state.ruleForm.gowhNum" filterable clearable class="w100"
            @change="handleChange(state.ruleForm.gowhNum)">
            <el-option v-for="item in state.belongWarehouses" :key="item" :label="item.eg_wms_warehouse.WHName"
              :value="item.eg_wms_warehouse.WHNum" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属区域" prop="goregionNum"
          :rules="[{ required: true, message: '所属区域不能为空', trigger: 'change' }]">
          <el-select v-model="state.ruleForm.goregionNum" filterable clearable class="w100"
            @change="handleChangeGoRegion()">
            <el-option v-for="item in state.belongAreas" :key="item" :label="item.RegionName" :value="item.RegionNum" />
          </el-select>
        </el-form-item>
        <el-form-item label="目标库位" prop="goEndPoint" :rules="[{ required: true, message: '库位编号不能为空', trigger: 'change' }]"
          @click="openAdd">
          <el-input v-model="state.ruleForm.goEndPoint" type="textarea" clearable />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="state.ruleForm.remake" placeholder="请输入备注内容" clearable type="textarea" class="extra" />
        </el-form-item>
      </el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<EditOrg ref="editRef" @handleQuery="addValue" :type="state.ruleForm.regionNum" />
    <EditOrg ref="editRef2" @handleQuery="addValue2" :type="state.ruleForm.goregionNum" :go="1" />
	</div>
</template>

<script lang="ts" setup name="sysEditPos">
import { reactive, ref } from 'vue';
import EditOrg from "/@/views/system/takeInventory/editKuwei.vue";
import { feature, getAPI } from '/@/utils/axios-utils';
import { APIJSONApi, SysDictDataApi, SysPosApi } from '/@/api-services/api';
import { WmsApi } from '/@/api/wh';


const props = defineProps({
	title: String,
});
const emits = defineEmits(['handleQuery']);
const ruleFormRef = ref();

const editRef = ref();
const editRef2 = ref();
const state = reactive({
	isShowDialog: false,
	ruleForm: {

	},
	belongWarehouses:[],
	editOrgTitle:''
});

// 打开弹窗
const openDialog = async (row: any) => {
  try {
      const res = await feature(
        getAPI(APIJSONApi).apiAPIJSONGetPost({
          "[]": {
            eg_wms_warehouse: {
              IsDelete: 0,
              "@column": "WHName,WHNum",
            },
          },
        })
      );
      console.log(res);

      state.belongWarehouses = res[1].data.result["[]"];
    } catch (error) {
      console.log(error);
    }
	state.ruleForm = JSON.parse(JSON.stringify(row));
	console.log(state.ruleForm.whStatus);

	state.isShowDialog = true;
	ruleFormRef.value?.resetFields();
};

// 关闭弹窗
const closeDialog = () => {
	emits('handleQuery');
	state.isShowDialog = false;

	
};
//来源库位赋值
const addValue = (parms: string | any[]) => {
    let storageNum1 = parms.map((item) => {
      return item.storageNum;
    });
    state.ruleForm.startPoint = storageNum1.join();
    console.log(state.ruleForm.startPoint);
  };
  //目标库位赋值
  const addValue2 = (parms) => {
    let storageNum1 = parms.map((item) => {
      return item.storageNum;
    });
    state.ruleForm.goEndPoint = storageNum1.join();
    console.log(state.ruleForm.goEndPoint);
  };
// 取消
const cancel = () => {
	state.isShowDialog = false;
};

// 提交
const submit = () => {
	ruleFormRef.value.validate(async (valid: boolean) => {
		if (!valid) return;
    WmsApi()
      .MoveOperation({
        "startPoint": state.ruleForm.startPoint,
        "goEndPoint": state.ruleForm.goEndPoint,
        "remake": state.ruleForm.remake
      })
      .then(function (res) {
        closeDialog()
      })
      .catch(function (error) {
        console.log(error);
      });

	
	});
}
const handleChange = async (id) => {
    state.belongAreas = []; //arr
    try {
      const res = await feature(
        getAPI(APIJSONApi).apiAPIJSONGetPost({
          "[]": {
            eg_wms_region: {
              IsDelete: 0,
              WHNum: id,
              "@column": "RegionNum,RegionName",
            },
          },
        })
      );

      res[1].data.result["[]"].forEach((item, index, input) => {
        input[index] = item.eg_wms_region;
      });
      state.belongAreas = res[1].data.result["[]"];
      console.log(state.belongAreas);
    } catch (error) {
      console.log(error);
    }
  };
  const handleChangeRegion = () => {
    state.ruleForm.startPoint = ''
  };
  const handleChangeGoRegion = () => {
    state.ruleForm.goEndPoint = ''
  };
    //添加原始库位
	const openAddSto = () => {
    state.editOrgTitle = "选取库位";
    editRef.value?.openDialog();
  };
  const openAdd = () => {
    state.editOrgTitle = "选取库位";
    editRef2.value?.openDialog();
  };
  
// 导出对象
defineExpose({ openDialog });
</script>
<style lang="scss" scoped>
.fl {
	width: 70%;
	margin: 20px auto;
}
</style>